<template>
    <div class="wrapper">
        <swiper ref="mySwiper" :options="swiperOption" v-if="showSwiper">
            <swiper-slide v-for="item of this.swiperList" :key="item.id">
                <div class="swiper-img">
                    <img :src="item.imgUrl">
                </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default {
    props:{
        swiperList:Array
    },
    name:'HomeSwiper',
    data:function(){
        return{
            swiperOption:{
                pagination: {
                    el: '.swiper-pagination'
                },
                loop:true,
                autoplay:true
            }
        }
    },
    computed:{
        showSwiper(){
            return this.swiperList.length;
        }
    }
}
</script>

<style lang="scss" scoped>
.wrapper{
    width:100%;
    height: 0;
    padding-bottom: 30.474%;
    background-color: #ccc;
    overflow: hidden;
}
.swiper-img{
    width:100%;
}
.swiper-img img{
    width: 100%;
}
</style>